<!--
 * @Author: zhangjingyu
 * @Date: 2021-03-16 10:13:45
 * @LastEditors: zhangjingyu
 * @LastEditTime: 2021-03-17 15:07:17
 * @FilePath: \vprisk10.14\src\views\ftpManage\pricingTrial\trialConfiger\component\trialTable.vue
 * @Description: 
-->
<template>
  <!-- 试算配置页面内table组件 -->
  <div style="padding:0 30px 0 30px">
    <table class="table" cellpadding="0" cellspacing="0" border="1">
      <thead class="thead">
        <tr>
          <td v-for="(item, i) in heads" :key="i" :width="item.width">
            {{ item.text }}
          </td>
        </tr>
      </thead>
      <tbody class="tbody">
        <!--As of Date-->
        <tr v-for="(bodyItem, i) in data" :key="bodyItem.testConfig.uuid">
          <td>{{ i + 1 }}</td>
          <td>{{ bodyItem.businessEle.elementName||bodyItem.testConfig.fieldClassify+(i+1) }}</td>
          <td>
            <el-select v-model="data[i].testConfig.showFlag" placeholder="">
              <el-option
                v-for="item in flagList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </td>
          <td>
            <el-select v-model="data[i].testConfig.inputFlag" placeholder="">
              <el-option
               v-for="item in flagList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </td>
          <td>
            <el-select v-model="data[i].testConfig.useCaliber" placeholder="">
              <el-option
                v-for="item in flagList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  props: {
    heads: {
      type: Array,
      default: () => [
        { code: "lineSeq", text: "序号", width: "15%" },
        { code: "businessElement", text: "业务元素" },
        { code: "isShow", text: "是否显示" },
        { code: "isInput", text: "是否输入" },
        { code: "isUseC", text: "是否使用试算口径" }
      ]
    },
    data: {
      type: Array,
      default: () => []
    },
    flagList: {
      type: Array,
      default: () => [
        { value: "1", label: "是" },
        { value: "0", label: "否" }
      ]
    }
  },
  data() {
    return {};
  }
};
</script>

<style lang="scss" scoped>
.table {
  width: 100%;
  height: auto;
  border-collapse: collapse;
  color: #646464;
}
.thead td {
  border: 1px solid #eaeaea;
  height: 30px;
  padding-left: 12px;
  text-align: center;
  background: #ecf1fc;
  font-weight: bold;
  line-height: 2;
  font-family: "PingFangSC-Light", "PingFang SC", "STHeitiSC-Light",
    "Helvetica-Light", "Arial", "sans-serif";
}
.table td {
  border: 1px solid #eaeaea;
  height: 30px;
  padding: 10px 10px 0px 10px;

  text-align: left;
  font-size: 12px;
  line-height: 2;
}
.table tr:hover {
  height: 30px;
  background-color: #e6f7ff;
}
</style>